<template>
  <div class="video-group borderStyle">
    <div class="video-group-title blueTitleStyle">门禁视频</div>
    <div class="video-group-content">
      <div class="content-box">
        <myvideo ref="myvideo" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import myvideo from "./video.vue";

@Component({ components: { myvideo } })
export default class VideoGroup extends Vue {
  @Prop()
  point_id;
  $refs!: {
    myvideo: myvideo;
  };
  @Watch("point_id", { immediate: true })
  fetchVideo() {
    let data = {};
    let query = this.$route.query || {};
    let stationId = query.code;
    if (!stationId) {
      return false;
    }
    if (this.point_id) {
      data = {
        accessId: this.point_id,
      };
    } else {
      data = {
        stationId,
      };
    }

    (this as any).$services
      .getAccessVideo({ data })
      .then((result) => {
        this.videoData = result.data || [];
        this.setPreview();
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  videoData = [];
  // 设置播放数据
  setPreview() {
    let stationId = "";
    let data = {
      stationId,
      list: [],
    };
    this.videoData.forEach((v) => {
      let opo = {
        indexCode: v.VIDEO_CODE,
        stationId: v.STATION_ID,
        yzwbm: v.PRESET,
      };
      data.stationId = v.STATION_ID;
      data.list.push(opo);
    });
    this.$refs.myvideo.shipinData = data;
  }
}
</script>

<style lang="scss" scoped>
.video-group {
  width: 100%;
  height: calc(100% - 0.4rem);
  margin: 0.2rem 0;
  &-title {
    width: 100%;
    height: 0.26rem;
  }
  &-content {
    width: 100%;
    height: 100%;
    .content-box {
      width: 100%;
      height: calc(100% - 0.26rem);
      > div {
        width: 100%;
        height: 100%;
        // background-color: lightgreen;
      }
    }
  }
}
</style>